<template>
  <div class="kpi-realtion">
    <div class="section-title relation-title"><icon-svg name="iconShare"></icon-svg>血缘关系</div>
    <div class="section-content">
      <div id="container" class="relation-box"></div>
    </div>
  </div>
</template>

<script>
import G6 from '@antv/g6'
export default {
  props: {
    tagType: {
      type: Number,
      default: 1
    },
    tagId: {
      type: String,
      required: true,
      default: ''
    }
  },
  mounted() {
    this.$nextTick(() => this.getRelation())
  },
  watch: {
    tagId() {
      this.getRelation()
    }
  },
  data() {
    return {
      dataList: {},
      edges: {},
      graph: null
    }
  },
  methods: {
    getRelation() {
      const url =
        this.tagType === 1
          ? `IndexAllocation/getAtomicIndexSource/${this.tagId}`
          : `IndexAllocation/getDerIndexSource/${this.tagId}`
      this.$ajax({
        url: this.$ajax.setUrl(url),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.$nextTick(() => {
            if (data.data) {
              this.dataList = JSON.parse(data.data)
              this.setRelation()
            }
          })
        } else {
          // 失败后执行的操作
        }
      })
    },
    sortArray(arr) {
      let newArr = []
      arr.forEach((item, index) => {
        const id = item.nodeNm + parseInt(Math.random() * 1000)
        newArr.push({ id: id, label: item.nodeNm })
        if (item.edgeNm) this.edges[id] = item.edgeNm
        if (item.childNode) newArr[index].children = this.sortArray(item.childNode)
      })
      return newArr
    },
    setRelation() {
      if (this.graph && !this.graph.destroyed) {
        this.graph.destroy()
        this.graph = null
      }
      let childrenNodes = this.sortArray(this.dataList.childNode)
      const data = {
        isRoot: true,
        id: this.dataList.nodeNm + parseInt(Math.random() * 1000),
        label: this.dataList.nodeNm,
        style: {
          fill: 'red'
        },
        children: childrenNodes
      }
      const container = document.getElementById('container')
      const width = container.scrollWidth
      const height = container.scrollHeight || 300
      this.graph = new G6.TreeGraph({
        container: 'container',
        width: width - 20,
        height: height - 20,
        linkCenter: true,
        modes: {
          default: [
            {
              type: 'collapse-expand',
              onChange: function onChange(item, collapsed) {
                const data = item.get('model')
                data.collapsed = collapsed
                return true
              }
            },
            'drag-canvas',
            'zoom-canvas'
          ]
        },
        defaultNode: {
          size: 30
        },
        layout: {
          type: 'compactBox',
          direction: 'LR',
          getId: function getId(d) {
            return d.id
          },
          getHeight: function getHeight() {
            return 16
          },
          getWidth: function getWidth() {
            return 16
          },
          getVGap: function getVGap() {
            return 10
          },
          getHGap: function getHGap() {
            return 100
          }
        }
      })

      this.graph.node(function(node) {
        return {
          size: 16,
          anchorPoints: [[0, 0.5], [1, 0.5]],
          style: {
            fill: '#C6E5FF',
            stroke: '#5B8FF9'
          },
          label: node.label,
          labelCfg: {
            position: node.children && node.children.length > 0 ? 'left' : 'right',
            offset: 5
          }
        }
      })
      const _this = this
      this.graph.edge(function(node) {
        const nodeArr = node.id.split(':')
        return {
          type: 'cubic-horizontal',
          color: '#A3B1BF',
          label: _this.edges[nodeArr[nodeArr.length - 1]]
        }
      })

      this.graph.data(data)
      this.graph.render()
      this.graph.fitView([0, width * 0.2])

      window.addEventListener('resize', () => {
        if (!this.graph || this.graph.destroyed) return
        if (!container || !container.scrollWidth || !container.scrollHeight) return
        this.graph.changeSize(container.scrollWidth, container.scrollHeight)
      })
    }
  },
  beforeDestroy() {
    if (this.graph && !this.graph.destroyed) {
      this.graph.destroy()
      this.graph = null
    }
  }
}
</script>

<style lang="scss">
.kpi-realtion {
  .section-title.relation-title {
    svg {
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }
  }
  .section-content {
    padding: 20px;
  }
  .relation-box {
    height: 300px;
  }
}
</style>
